<template>
  <div>
        <headersearchsub :placeholder='placeholder' :action='action'
        v-on:fucallbackBlurflag='fucallBlurflag'
        v-on:fucallbackValue='fucallValue'
        v-on:fucallbackCheckflag='fucallCheckflag'
        :checkflag='checkFlag'
        >
        </headersearchsub>
        <div class="in-result" :class='{active: value.length && !blurFlag}' @click='addFriend'>
            <span class="user-search mui-icon-extra mui-icon-extra-addpeoplemui-icon-extra mui-icon-extra-addpeople"></span>
            搜索:
            <span class="in-text">{{value}}</span>
        </div>
        <div class="check-msg"  v-show="checkFlag">
            <div class="back-check">
                <span class="mui-icon mui-icon-arrowleft" @click="hideCheck"></span>
            </div>
            <div class='add-friend'>
                <span>想要添加的好友:</span>
                <span>{{value}}</span>
            </div>
            <div class="add-text">
              <span class="add-check">请填写验证信息</span>
              <textarea cols="20" rows="6" v-model="message"></textarea>
            </div>
            <div class="btn">
              <button type="button" class="mui-btn mui-btn-danger" @click='addFriendBtn'>确认添加</button>
            </div>
        </div>
  </div>
</template>
<script>
import headersearchsub from './HeaderSearchSub'
  export default {
      data() {
          return {
            // 搜索输入提示
            placeholder: '环信ID',
            action: '添加好友',
            // 用户搜索好友所输入的内容
            value: '',
            // 用户添加好友输入的验证信息
            message: '',
              // 0代表热门搜索 1代表搜索结果 2代表搜索的历史记录
            // toggleFlag: 0,
            // 失去焦点标志 false代表没有失去焦点
            blurFlag: true,
            // 展现验证信息的标志
            checkFlag: false
          }
      },
      components: {
        headersearchsub
      },
      created() {
          this.init()
      },
      methods: {
          init() {
              var self = this
              self.$immui.init()
            //   document.getElementById("search").addEventListener("keypress",function(event) {
            //     if(event.keyCode == "13") {
            //         document.activeElement.blur();//收起虚拟键盘
            //         // toSearch();//TODO 完成搜索事件
            //         self.value += '111'
            //         event.preventDefault(); // 阻止默认事件---阻止页面刷新
            //     }
            // })
          },
          searchIcon() {
            //    this.toggleFlag = 1
          },
        // 点击隐藏验证信息的填写
          hideCheck() {
            console.log(11111)
              this.checkFlag = false
              this.$emit('fucallbackcheckFlag', this.checkFlag)
          },
// 点击之后填写好友验证信息
          addFriend() {
              this.checkFlag = true
              this.$emit('fucallbackcheckFlag', this.checkFlag)
              // buxianhsidongxi0----------------
          },
          // 好友添加界面，输入完验证信息，点击确认添加
          addFriendBtn() {
            var self = this
          // 向环信发送添加好友请求
            self.$imconn.subscribe({
              to: self.value,
// 这个message，接收方在status字段里面
              message: self.message
            })
            // 退出好友添加界面，界面回退搜索界面
            self.checkFlag = false
            self.value = ''
            self.message = ''
            // console.log(self.value, '00000000000')
            self.$emit('fucallbackcheckFlag', self.checkFlag)
          },
          // 子组件向父组件传值，是否失去焦点的值
          fucallBlurflag(flag) {
            this.blurFlag = flag
            // 子组件向父组件传值
            this.$emit('fucallback', this.blurFlag)
          },
          // 子组件向父组件传值，传输入内容的值
          fucallValue(newValue) {
            this.value = newValue
          },
          fucallCheckflag(flag) {
            // 子组件向父组件传值
            this.checkFlag = flag
          }
      }
  }
</script>
<style lang='scss' scoped>
 .header{
    width: 100%;
    height: 52px;
    display: flex;
    position: relative;
    .iconSearch{
      position: absolute;
      left: 13px;
      top: 12px;
    }
    .text{
      flex: 1;
      display: inline-block;
      width: 80%;
      height: 30px;
      line-height: 30px;
      margin: 10px 10px 0 10px;
      padding-left:26px ;
      outline: none;
      border: 0;
      padding-left: 36px;
      &::-webkit-input-placeholder { /* WebKit browsers */
        color: #ccc;
        font-size: 14px;
        }

      &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #ccc;
      font-size: 14px;
        }
      &::-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #ccc;
      font-size: 14px;
        }
    }
    .close {
      position: absolute;
      right: 60px;
      top: 14px;
      font-size: 22px;
    //   border-radius: 50%;
    //   border: 1px solid black;
      display: none;
      &.active{
        display: block;
      }
    }
    .cancel-text{
      flex: 0 0 40px;
      line-height: 52px;
      padding-right: 4px;
      display: none;
      &.active{
        display: block;
        font-size: 14px;
        color: blue;
      }
    }
  }
  .in-result{
      display: none;
      line-height: 40px;
      padding: 10px;
      box-sizing: border-box;
      &.active{
          display: block;
          background: #f4f4f4;
      }
      .user-search{
          width: 40px;
          height: 40px;
          background: rgb(125, 201, 12);
          text-align: center;
          line-height: 40px;
      }
      .in-text {
          color: rgb(125, 201, 12);
      }
  }
  .check-msg{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:white;
      z-index: 1000;
    .back-check{
        height: 44px;
        background: #ccc;
        line-height: 44px;
    }
    .add-friend{
        height: 44px;
        line-height: 44px;
        font-size: 22px;
        color: rgb(99, 83, 83);
      }
    .add-text{
        .add-check{
          display: inline-block;
          height: 36px;
          line-height: 36px;
          color: darkgray;
        }
        textarea{
          width: 94vw;
          margin: 0 3vw 3vw 3vw;
          box-sizing: border-box;
        }
      }
      .btn{
        width: 100vw;
        button{
          width: 100vw;
          font-size: 18px;
        }
      }
  }
</style>
